<%@ page language="java" contentType="text/html; charset=UTF8"
	pageEncoding="UTF8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>welcome to link!!!</title>
<script type="text/javascript"
	src="https://code.jquery.com/jquery-1.11.3.js">
	
</script>
<script type="text/javascript">
	var firstLevelLink = [];
	var secondLeveLink = [];
	var thirdLevelLink = [];
	var forthLevelLink = [];

	$(function() {
		//var link_list=JSON.parse($('#linkJsonString').val());
		/* console.info($('#linkJsonString').val()); */

		$.ajax({
			type : "POST",
			url : "searchJsonLink.action",
			dataType : "json",
			success : function(link) {
				$.each(link, function(index, value) {
					if (value.catalogueLevel === 1) {
						firstLevelLink.push(value);
					}

				});

				$.each(firstLevelLink, function(index, value) {
					generatorSecondLink(value, link);

					$.each(secondLeveLink, function(index1, value1) {

						generatorThirdLink(secondLeveLink[index1], link);
					});

					$.each(thirdLevelLink, function(index2, value2) {

						generatorForthLink(thirdLevelLink[index2], link);
					});

				});

				//遍历显示
				each1(firstLevelLink); 
				each2(secondLeveLink); 
				each3(thirdLevelLink);
				each4(forthLevelLink); 

				console.info("firstLevelLink:");
				console.info(firstLevelLink);
				console.info("secondLeveLink:");
				console.info(secondLeveLink);
				console.info("thirdLevelLink:");
				console.info(thirdLevelLink);
				console.info("forthLevelLink:");
				console.info(forthLevelLink);

			}
		});
	});

	//处理二级标题方法
	function generatorSecondLink(fir, allLink) {
		var temp = new Array();
		//遍历所有link，根据ParentID 和 linkID 取出一级标题下的二级标题，
		//和直接放在一级标题下的四级标题放进secondLeveLink[]数组中
		$.each(allLink, function(index, value) {
			if (value.catalogueParentID == fir.linkID) {
				temp.push(value);
			}
		})
		secondLeveLink.push(temp);
	}

	//处理三级标题方法
	function generatorThirdLink(sec, allLink) {

		var temp2 = new Array();

		//遍历所有secondLeveLink，根据ParentID 和 linkID 取出二级标题下的三级标题以及直接放在二级标题下的四级标题，
		//将他们都放进thirdLevelLink[]数组中
		$.each(sec, function(index, value) {
			var temp1 = new Array();

			$.each(allLink, function(index1, value1) {

				if (value1.catalogueParentID == value.linkID) {

					temp1.push(value1);
				}
			});
			var len = temp1.length;
			if (len) {
				temp2.push(temp1);
			}
		});
		var len2 = temp2.length;
		if (len2) {
			thirdLevelLink.push(temp2);
		}

	}

	//处理四级标题方法
	function generatorForthLink(thr, allLink) {

		//遍历所有thirdLevelLink，根据ParentID 和 linkID 取出所有三级标题下的四级标题，
		//将他们都放进forthLevelLink[]数组中
		//四级标题为最小级别标题，此级标题有对应的URL

		var temp3 = new Array();
		$.each(thr, function(index, value) {
			var temp4 = new Array();
			$.each(value, function(index1, value1) {
				//if (value1.catalogueParentID == value.linkID) {
				var temp5 = new Array();
				$.each(allLink, function(index2, value2) {

					if (value2.catalogueParentID == value1.linkID) {
						temp5.push(value2);
					}
				});

				var len5 = temp5.length;
				if (len5) {
					temp4.push(temp5);
				}
			});

			if (temp4.length) {
				temp3.push(temp4);
			}
		});

		if (temp3.length) {
			forthLevelLink.push(temp3);
		}

	}

	//遍历一级标题，并显示出来并放进table
	function each1(firstLevelLink_1) {

		var html1 = "";
		$.each(firstLevelLink_1, function(index, link) {
			var trs = "";
			trs += "<tr><td>" + link.linkID + "</td><td>" + link.linkName
					+ "</td><td style=\"width:40px;\">" + link.linkURL + "</td><td>"
					+ link.catalogueParentID + "</td><td>"
					+ link.catalogueLevel + "</td><td>" + link.quickLink_flag
					+ "</td><td>" + link.quickLink_Catalogue + "</td><td>"
					+ link.linkDelete_flag + "</td><td><button type=\"button\" class=\"btn4\" onclick=\"window.location='goToeditLink.action?link_id="
							+link.linkID+"' \">修&nbsp;&nbsp;改</button><button type=\"button\" class=\"btn4\" onclick=\"window.location='deleteLink.action?link_id="
									+link.linkID+"' \">删&nbsp;&nbsp;除</button></td></tr>";

			html1 += trs;
		});

		$("#table").append(html1);

	}

	//遍历二级标题，并显示出来(table)
	function each2(secondLeveLink_s) {

		var html2 = "";
		$.each(secondLeveLink_s, function(index1, link1) {

			$.each(link1, function(index2, link2) {
				var trs = "";
				trs += "<tr><td>" + link2.linkID + "</td><td>" + link2.linkName
						+ "</td><td style=\"width:40px;\">" + link2.linkURL + "</td><td>"
						+ link2.catalogueParentID + "</td><td>"
						+ link2.catalogueLevel + "</td><td>"
						+ link2.quickLink_flag + "</td><td>"
						+ link2.quickLink_Catalogue + "</td><td>"
						+ link2.linkDelete_flag + "</td><td><button type=\"button\" class=\"btn4\" onclick=\"window.location='goToeditLink.action?link_id="
						+link2.linkID+"' \">修&nbsp;&nbsp;改</button><button type=\"button\" class=\"btn4\" onclick=\"window.location='deleteLink.action?link_id="
						+link2.linkID+"' \">删&nbsp;&nbsp;除</button></td></tr>";

				html2 += trs;
			});
		});
		$("#table").append(html2);
	}
	
	//遍历显示三级标题
	function each3(thirdLevelLink_s){
		var html3 = "";
		$.each(thirdLevelLink_s,function(index1,link1){
			$.each(link1, function(index2, link2) {
				$.each(link2, function(index3, link3) {
				
					var trs = "";
					trs += "<tr><td>" + link3.linkID + "</td><td>" + link3.linkName
					+ "</td><td style=\"width:40px;\">" + link3.linkURL + "</td><td>"
					+ link3.catalogueParentID + "</td><td>"
					+ link3.catalogueLevel + "</td><td>"
					+ link3.quickLink_flag + "</td><td>"
					+ link3.quickLink_Catalogue + "</td><td>"
					+ link3.linkDelete_flag + "</td><td><button type=\"button\" class=\"btn4\" onclick=\"window.location='goToeditLink.action?link_id="
					+link3.linkID+"' \">修&nbsp;&nbsp;改</button><button type=\"button\" class=\"btn4\" onclick=\"window.location='deleteLink.action?link_id="
					+link3.linkID+"' \">删&nbsp;&nbsp;除</button></td></tr>";

			html3 += trs;
				
			});
		});
	});
	$("#table").append(html3);
	}
		
	//遍历显示四级标题
	function each4(forthLevelLink_s){
		var html4 = "";
		$.each(forthLevelLink_s, function(index1,link1){
			$.each(link1, function(index2, link2) {
				$.each(link2, function(index3, link3) {
					$.each(link3, function(index4, link4) {
				
				
					var trs = "";
					trs += "<tr><td>" + link4.linkID + "</td><td>" + link4.linkName
					+ "</td><td style=\"width:40px;\">" + link4.linkURL + "</td><td>"
					+ link4.catalogueParentID + "</td><td>"
					+ link4.catalogueLevel + "</td><td>"
					+ link4.quickLink_flag + "</td><td>"
					+ link4.quickLink_Catalogue + "</td><td>"
					+ link4.linkDelete_flag + "</td><td><button type=\"button\" class=\"btn4\" onclick=\"window.location='goToeditLink.action?link_id="
					+link4.linkID+"' \">修&nbsp;&nbsp;改</button><button type=\"button\" class=\"btn4\" onclick=\"window.location='deleteLink.action?link_id="
					+link4.linkID+"' \">删&nbsp;&nbsp;除</button></td></tr>";

			html4 += trs;
					})	;
			});
		});
	});
	$("#table").append(html4);
	}
	
</script>


</head>
<body>

	<button type="button" class="btn2" id="back"
		onclick="window.location='goToAddLink.action'">Add&nbsp;&nbsp;Link</button>

	<table id="table" border="1" class="datalist">
		<tr id="ttbody">
			<th>Link Id</th>
			<th>Link Name</th>
			<th>LinkURL</th>
			<th>CatalogueParentID</th>
			<th>CatalogueLevel</th>
			<th>QuickLink_flag</th>
			<th>QuickLink_Catalogue</th>
			<th>LinkDelete_flag</th>
			<th>Operation</th>
		</tr>

	</table>

</body>

</html>



